<template>
	<view class="service_wrap">
		<view class="basic_info">
			<view class="title">基本信息</view>
			<view class="avatar_item">
				<button class="avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				</button>
				<image v-if="up_avatar == ''" :src="remoteUrl + 'recruit_head.png'" class="avatar_img"></image>
				<image v-else :src="ossUrl + up_avatar" class="avatar_img"></image>
				<view class="right_item">
					<text>修改</text>
					<image class="right_icon" :src="remoteUrl + 'right_icon.png'" mode=""></image>
				</view>
			</view>
			<view class="input_wrap">
				<view class="left_text">姓名</view>
				<input class="right_text" type="text" placeholder="请输入姓名" :value="username" @input="bindname" />
			</view>
			<view class="input_wrap">
				<view class="left_text">性别</view>
				<picker mode="selector" style="width: 100%;" :range="gender" @change="bindGender">
					<view class="picker">
						<view class="right_text" :style="gender_index === '' ? 'color: #00000080' : ''">{{ gender_index === '' ? '请选择' : gender[gender_index] }}</view>
						<image :src="remoteUrl + 'right_icon.png'" class="right_icon" mode=""></image>
					</view>
				</picker>
			</view>
			<view class="input_wrap">
				<view class="left_text">标签</view>
				<input class="right_text" type="text" placeholder="请输入" :value="tags" @input="bindtags" />
			</view>
		</view>
		
		<view class="info_item">
			<view class="title">工作信息</view>
			<view class="input_wrap">
				<view class="left_text">公司名称</view>
				<input class="right_text" type="text" placeholder="请输入" :value="company" @input="bindcompany" />
			</view>
			<view class="input_wrap">
				<view class="left_text">职位</view>
				<input class="right_text" type="text" placeholder="请输入" :value="company_position" @input="bindposition" />
			</view>
			<view class="input_wrap">
				<view class="left_text">行业</view>
				<input class="right_text" type="text" placeholder="请输入" :value="industry" @input="bindindustry" />
			</view>
		</view>
		
		<view class="info_item">
			<view class="title">学历信息</view>
			<view class="input_wrap">
				<view class="left_text">学校名称</view>
				<picker mode="selector" style="width: 100%;" :range="school_list" range-key="name" :value="school_index" @change="bindSchool">
					<view class="picker">
						<view class="right_text" :style="school_index === '' ? 'color: #00000080' : ''">{{ school_index === '' ? '请选择' : school_list[school_index].name }}</view>
						<image :src="remoteUrl + 'right_icon.png'" class="right_icon" mode=""></image>
					</view>
				</picker>
			</view>
			<view class="input_wrap">
				<view class="left_text">学历</view>
				<input class="right_text" type="text" placeholder="请输入" :value="education" @input="bindeducation" />
			</view>
			<view class="input_wrap">
				<view class="left_text">专业</view>
				<input class="right_text" type="text" placeholder="请输入" :value="major" @input="bindmajor" />
			</view>
		</view>
		
		<view class="info_item">
			<view class="title">个人介绍</view>
			<textarea placeholder="请输入" maxlength="2000" :value="introduce" @input="bindintroduce"></textarea>
		</view>
		<view class="info_item">
			<view class="title">优势资源</view>
			<textarea placeholder="请输入" maxlength="2000" :value="advantage" @input="bindadvantage"></textarea>
		</view>
		
		<view class="bot_btn">
			<view class="btn" @click="saveProfileFun()">提交</view>
		</view>
	</view>
</template>

<script>
	import {
		remoteUrl,
		ossUrl
	} from '@/utils/config.js'
	import {
		getSchool,
		saveProfile
	} from '@/api/mine.js'
	import {uploadFile} from '@/utils/tools.js'
	export default { 
		data() {
			return {
				ossUrl: ossUrl,
				remoteUrl: remoteUrl,
				up_avatar: '',
				username: '',
				gender: ['女','男'],
				gender_index: '',
				tags: '',   // 标签
				company: '',
				company_position: '',
				industry: '',
				school_id: '',
				school_list: [],  // 学校列表
				school_index: '',
				education: '',
				major: '',
				introduce: '',  // 介绍
				advantage: ''
			};
		},
		onLoad(options) {
			if (options.detail) {
				let obj = JSON.parse(options.detail)
				this.username = obj.nickname
				this.up_avatar = obj.avatar
				this.gender_index = obj.gender
				this.tags = obj.tag
				this.company = obj.company_name
				this.company_position = obj.company_position
				this.industry = obj.company_industries
				this.school_id = obj.school_id
				this.education = obj.school_education
				this.major = obj.school_major
				this.introduce = obj.intro
				this.advantage = obj.merit
			}
			this.getSchoolFun()
		},
		onShareAppMessage(res) { //发送给朋友
			return {
				title: '小程序分享',
				imageUrl: '',
			}
		},
		methods: {
			// 学校列表
			getSchoolFun() {
				getSchool().then(res => {
					if (res.code == 1) {
						if (this.school_id) {
							let index = res.data.findIndex(item => item.id == this.school_id)
							this.school_index = index
						}
						this.school_list = res.data
					}
				})
			},
			onChooseAvatar(e) {
				let that = this
				uploadFile(e.detail.avatarUrl).then(res => {
					if (res.code == 1) {
						this.up_avatar = res.data.url
					}
				})
			},
			// 输入姓名
			bindname(e) {
				this.username = e.detail.value
			},
			// 选择性别
			bindGender(e) {
				this.gender_index = e.detail.value
			},
			// 输入标签
			bindtags(e) {
				this.tags = e.detail.value
			},
			// 公司名称
			bindcompany(e) {
				this.company = e.detail.value
			},
			// 公司职位
			bindposition(e) {
				this.company_position = e.detail.value
			},
			// 行业
			bindindustry(e) {
				this.industry = e.detail.value
			},
			
			// 选择学校
			bindSchool(e) {
				this.school_index = e.detail.value
			},
			// 学历
			bindeducation(e) {
				this.education = e.detail.value
			},
			// 专业
			bindmajor(e) {
				this.major = e.detail.value
			},
			// 个人介绍
			bindintroduce(e) {
				this.introduce = e.detail.value
			},
			// 优势
			bindadvantage(e) {
				this.advantage = e.detail.value
			},
			// 保存个人信息
			saveProfileFun() {
				if (this.up_avatar == '') {
					uni.showToast({
						title: '请上传头像！',
						icon:'none'
					})
					return
				}
				if (this.username == '') {
					uni.showToast({
						title: '请输入姓名！',
						icon:'none'
					})
					return
				}
				if (this.gender_index === '') {
					uni.showToast({
						title: '请选择性别！',
						icon:'none'
					})
					return
				}
				if (this.tags == '') {
					uni.showToast({
						title: '请输入标签！',
						icon:'none'
					})
					return
				}
				if (this.company == '') {
					uni.showToast({
						title: '请输入公司名称！',
						icon:'none'
					})
					return
				}
				if (this.company_position == '') {
					uni.showToast({
						title: '请输入公司职位！',
						icon:'none'
					})
					return
				}
				if (this.industry == '') {
					uni.showToast({
						title: '请输入所属行业！',
						icon:'none'
					})
					return
				}
				if (this.school_index === '') {
					uni.showToast({
						title: '请选择学校！',
						icon:'none'
					})
					return
				}
				if (this.education == '') {
					uni.showToast({
						title: '请输入学历！',
						icon:'none'
					})
					return
				}
				if (this.major == '') {
					uni.showToast({
						title: '请输入专业！',
						icon:'none'
					})
					return
				}
				if (this.introduce == '') {
					uni.showToast({
						title: '请输入个人介绍！',
						icon:'none'
					})
					return
				}
				if (this.advantage == '') {
					uni.showToast({
						title: '请输入优势资源！',
						icon:'none'
					})
					return
				}
				saveProfile({
					nickname: this.username,
					avatar: this.up_avatar,
					gender: this.gender_index,
					tag: this.tags,
					intro: this.introduce,
					merit: this.advantage,
					school_id: this.school_list[this.school_index].id,
					school_education: this.education,
					school_major: this.major,
					company_name: this.company,
					company_position: this.company_position,
					company_industries: this.industry
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '保存成功！',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						},600)
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.service_wrap {
		min-height: 100vh;
		background: #F5F5F5;
		padding-top: 20rpx;
		padding-bottom: 100rpx;

		.basic_info {
			width: 690rpx;
			height: 590rpx;
			background: #fff;
			border-radius: 24rpx;
			margin: 0 auto;
			padding: 26rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
			}

			.avatar_item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 0;
				// border-bottom: 1rpx solid #00000010;
				position: relative;

				.avatar {
					position: absolute;
					width: 100%;
					height: 100%;
					opacity: 0;
				}

				.avatar_img {
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
				}

				.right_item {
					display: flex;
					align-items: center;
					font-size: 28rpx;

					.right_icon {
						width: 15rpx;
						height: 24rpx;
						margin-left: 10rpx;
					}
				}

			}
		
		
			.input_wrap {
				display: flex;
				padding: 30rpx 0 30rpx 0;
				border-top: 1rpx solid #00000010;
				.left_text {
					width: 200rpx;
					font-size: 28rpx;
				}
				.right_icon {
					width: 15rpx;
					height: 24rpx;
				}
				.picker {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}
	
		.info_item {
			width: 690rpx;
			height: 420rpx;
			background: #fff;
			border-radius: 24rpx;
			margin: 30rpx auto 0;
			padding: 26rpx;
			
			.title {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 30rpx;
			}
			.input_wrap {
				display: flex;
				padding: 30rpx 0 30rpx 0;
				border-top: 1rpx solid #00000010;
				.left_text {
					width: 200rpx;
					font-size: 28rpx;
				}
				.right_icon {
					width: 15rpx;
					height: 24rpx;
				}
				.picker {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}
	
		.bot_btn {
			width: 100vw;
			height: 108rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 2;
			display: flex;
			align-items: center;
		
			.btn {
				width: 650rpx;
				height: 80rpx;
				line-height: 80rpx;
				margin: 0 auto;
				text-align: center;
				color: #fff;
				font-size: 28rpx;
				background: #1C41F1;
				border-radius: 54rpx;
			}
		}
	}
</style>